নিচে যে সুন্দর একটি এইচটিএমএল টেবিল দেখতে পাচ্ছেন তা সিএসএস দিয়ে স্টাইল করা হয়েছে।

এই অধ্যায়ে আমরা ধাপে ধাপে এধরনের টেবিল তৈরি করা শিখবোঃ

একনজরে সিএসএসের টেবিল প্রোপার্টিসমূহ

টেবিলে বর্ডার সেট

< table> এর চারপাশে বর্ডার সেট করার জন্য সিএসএস border প্রোপার্টি ব্যবহার করতে হয়।

kt_satt_skill_example_id=695

উপরের উদাহরণে লক্ষ্য করলে দেখবেন, শুধুমাত্র < table> এর চারপাশে বর্ডার আছে। কিন্তু < th> এবং < td> এলিমেন্টে কোনো বর্ডার নাই।

< table>, < th> এবং < td> এলিমেন্টে বর্ডার দিতে হলে এদের প্রত্যেকটিতে পৃথকভাবে border প্রোপার্টি সেট করতে হবে।

kt_satt_skill_example_id=701

উপরের উদাহরণে লক্ষ্য করলে দেখবেন, টেবিলের মধ্যে ডাবল বর্ডার দেখা যাচ্ছে। কারণ <table>, <th> এবং <td> তিনটি এলিমেন্টের জন্য পৃথকভাবে বর্ডার সেট করা হয়েছে।

টেবিলের বর্ডার কলাপ্স

টেবিলের বর্ডারসমূহ একটি একক বর্ডারে কলাপ্স হবে কিনা অর্থাৎ দুটি বর্ডার এক হয়ে যাবে কিনা তা নির্ধারণ করার জন্য border-collapse প্রোপার্টিটি ব্যবহার করা হয়।

kt_satt_skill_example_id=702

উপরের উদাহরনে border-collapse প্রোপার্টি ব্যবহার করায় দুটি বর্ডার একত্রিত হয়ে একটি বর্ডারে পরিনত হয়েছে।

টেবিলের টেক্সট এলাইনমেন্ট সেট

টেবিলের < th> এবং < td> এলিমেন্টের কন্টেন্টসমূহ অনুভূমিকভাবে সেন্টারে, বামে নাকি ডানে দেখাবে তা সেট করার জন্য সিএসএস text-align প্রোপার্টি ব্যবহার করা হয়।

ডিফল্টভাবে < th> এলিমেন্টেের কন্টেন্টসমূহ সেন্টারে থাকে এবং < td> এলিমেন্টের কন্টেন্টসমূহ বামে থাকে।

নিচের উদাহরনে < th> এলিমেন্টের কন্টেন্টসমূহের এলাইনমেন্ট left নির্ধারণ করা হয়েছে।

kt_satt_skill_example_id=703

বিঃদ্রঃ এছাড়াও আপনি চাইলে কন্টেন্টকে ভার্টিক্যাললি এ্যালাইন করতে পারবেন।  < th> এবং < td> এলিমেন্টের কন্টেন্টকে ভার্টিক্যাললি এ্যালাইন করার জন্য vertical-align প্রোপার্টিটি ব্যবহার করুন। এর সম্ভাব্য ভ্যালুগুলো হলোঃ top এবং bottom।

টেবিলের প্রস্থ এবং উচ্চতা সেট

টেবিলের প্রস্থ এবং উচ্চতা নির্ধারণ করার জন্য সিএসএস width এবং height প্রোপার্টি ব্যাবহার করা হয়।

নিচের উদাহরনে < table> এর প্রস্থ সেট করা হয়েছে 100% এবং < th> এলিমেন্টের height সেট করা হয়েছে 50px।

kt_satt_skill_example_id=707

টেবিলে প্যাডিং যুক্তকরণ

টেবিলের বর্ডার এবং কন্টেন্ট এর মধ্যে স্পেস নিয়ন্ত্রন করার জন্য < th> এবং < td> এলিমেন্টে padding প্রোপার্টি ব্যবহার করা হয়।

kt_satt_skill_example_id=711

সারিকে অনুভূমিকভাবে বিভাজন

টেবিলের সারিগুলোকে অনুভূমিক ভাবে বিভাজন করার জন্য < th> এবং < td> এলিমেন্টে border-bottom প্রোপার্টি যুক্ত করা হয়।

kt_satt_skill_example_id=714

টেবিলের সারিতে পৃথকভাবে কালার সেট

নিচের উদাহরণে < th> এলিমেন্টের ব্যাকগ্রাউন্ড কালার এবং টেক্সট কালার নির্ধারণ করা হয়েছেঃ

kt_satt_skill_example_id=720

টেবিলে জেব্রা স্টাইল যুক্তকরণ

টেবিলকে জেব্রা স্টাইল করতে হলে nth-child() সিলেক্টর ব্যবহার করে টেবিলের জোড় অথবা বিজোড় সারিতে background-color প্রোপার্টি যুক্ত করতে হবে।

kt_satt_skill_example_id=738

টেবিলে হোভার ইফেক্ট যুক্তকরণ

টেবিলের সারির উপর মাউস নেওয়ার পরে সারিকে হাইলাইট করার জন্য < tr> এলিমেন্টে :hover সিলেক্টর ব্যবহার করে সিএসএস প্রয়োগ করুন।

kt_satt_skill_example_id=732

রেসপন্সিভ টেবিল তৈরি করা

টেবিলকে রেস্পন্সিভ করার জন্য <table> এলিমেন্টকে <div> এলিমেন্টের মধ্যে রেখে <div> এলিমেন্টে overflow-x: auto প্রোপার্টি ব্যবহার করুন।

kt_satt_skill_example_id=736

বিঃদ্রঃ রেসপন্সিভনেস বুঝার জন্য ব্রাউজারের উইন্ডো রিসাইজ করুন।